<template>
    <div>
        <el-dialog v-model="dialogVisible" :modal=false width="1192" style="margin-top: 130px;" @close="closeTan">
            <div class="tantop flex-between">
                <div class="flex">
                    <div v-for="(item, index) in data.title" :key="index" @click="changeIndex(index)"
                        :class="[data.zindex == index ? 'active' : '', 'listitem']">
                        {{ item.name }}
                    </div>
                </div>
                <div class="rightbox flex-between">
                    <el-select v-model="campusId" placeholder="校区" style="width: 240px" @change="campusChange">
                        <el-option v-for="(item, index) in data.campusList" :key="index" :label="item.campusName"
                            :value="item.campusId" />
                    </el-select>
                    <el-select v-model="dormitoryId" placeholder="楼栋" clearable style="width: 240px"
                        @change="dormitoryChange" @clear="clear">
                        <el-option v-for="(item, index) in data.dormitoryList" :key="index" :label="item.label"
                            :value="item.dormitoryId" />
                    </el-select>
                    <el-select v-model="state" placeholder="状态" clearable style="width: 240px" @change="stateChange"
                        @clear="clearState">
                        <el-option v-for="(item, index) in data.states" :key="index" :label="item.name"
                            :value="item.state" />
                    </el-select>
                </div>
            </div>
            <div class="xboxs flex-start">
                <div class="flex-start itemboxs">
                    <div class="flex-start" style="height: 100%;">
                        <img src="@/assets/image/home/tan1.png" class="ic" alt="">
                        <div class="flex-column-center rbox">
                            <div class="flex-start">
                                <div class="count">{{ data.totalData?.totalCount }}</div>
                                <div class="tai">台</div>
                            </div>
                            <div class="xt">设备总数</div>
                        </div>
                    </div>
                </div>
                <div class="flex-start itemboxs">
                    <div class="flex-start" style="height: 100%;">
                        <img src="@/assets/image/home/tan2.png" class="ic" alt="">
                        <div class="flex-column-center rbox">
                            <div class="flex-start">
                                <div class="count">{{ data.totalData?.onlineCount }}</div>
                                <div class="tai">台</div>
                            </div>
                            <div class="xt">在线设备</div>
                        </div>
                    </div>
                </div>
                <div class="flex-start itemboxs">
                    <div class="flex-start" style="height: 100%;">
                        <img src="@/assets/image/home/tan3.png" class="ic" alt="">
                        <div class="flex-column-center rbox">
                            <div class="flex-start">
                                <div class="count">{{ data.totalData?.offlineCount }}</div>
                                <div class="tai">台</div>
                            </div>
                            <div class="xt">离线设备</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offlist" ref="tableContainer">
                <el-table :data="data.totalData.devices" height="430" style="width: 100%" @mouseenter="stopScroll"
                    @mouseleave="createScroll" empty-text="暂无数据" ref="tableRef">
                    <el-table-column type="index" align="center" label="序号" width="180" />
                    <el-table-column prop="campusName" align="center" label="校区" width="180" />
                    <el-table-column prop="dormitoryRoomName" align="center" label="宿舍号" width="180" />
                    <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
                    <el-table-column align="center" label="状态" width="180">
                        <template #default="scope">
                            <el-button v-if="scope.row.state == '在线'" type="success">在线</el-button>
                            <el-button v-else type="danger">离线</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="usedNum" align="center" label="已使用电量/水量" />
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted, nextTick, watch } from 'vue'
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)

let data = reactive({
    title: [{
        name: '电',
        value: 1
    }, {
        name: '水',
        value: 2
    }],
    zindex: 0,
    campusList: [],
    dormitoryList: [],
    totalData: [],
    states: [{
        name: '在线',
        state: 1
    }, {
        name: '离线',
        state: 0
    }]
})
let changeIndex = (index) => {
    data.zindex = index
    getData()
}
let campusId = ref(null)
let dormitoryId = ref(null)
let state = ref(null)

// 打开弹窗
let open = () => {
    dialogVisible.value = true
    data.zindex = 0
    campusId.value = null
    dormitoryId.value = null
    state.value = null
    campusList()
}
// 关闭弹窗
let close = () => {
    dialogVisible.value = false
}
// 校区列表
let campusList = async () => {
    let res = await proxy.$https.campusList()
    console.log('campusList', res);
    data.campusList = res.data
    data.campusList.forEach((item) => {
        item.campusId = item.id
    })
    campusId.value = data.campusList[1].id
    dormitoryList()
    getData()
}

// 楼栋列表
let dormitoryList = async () => {
    let res = await proxy.$https.dormitoryList({
        campusId: campusId.value
    })
    console.log('dormitoryList', res);
    data.dormitoryList = res.data
    data.dormitoryList.forEach((item) => {
        item.dormitoryId = item.id
    })
}
// 校区改变
let campusChange = (id) => {
    campusId.value = id
    dormitoryList()
    //清空楼栋
    dormitoryId.value = null
    getData()
}
// 清空楼栋
let clear = () => {
    dormitoryId.value = null
    getData()
}

// 清空状态
let clearState = () => {
    state.value = null
    getData()
}

// 楼栋改变
let dormitoryChange = (id) => {
    dormitoryId.value = id
    getData()
}
//状态改变
let stateChange = (val) => {
    state.value = val
    getData()
}

// 获取水还是电
let getData = () => {
    if (data.zindex == 0) {
        listEleDevice()
    } else {
        listWaterDevice()
    }
}

// 获取电列表
let listEleDevice = async () => {
    let res = await proxy.$https.listEleDevice({
        campusId: campusId.value,
        dormitoryId: dormitoryId.value,
        state: state.value
    })
    console.log('listEleDevice', res);
    data.totalData = res.data
    if (res.data.devices?.length > 0) {
        createScroll()
    } else {
        stopScroll()
    }
}
// 获取水列表
let listWaterDevice = async () => {
    let res = await proxy.$https.listWaterDevice({
        campusId: campusId.value,
        dormitoryId: dormitoryId.value,
        state: state.value
    })
    console.log('listWaterDevice', res);
    data.totalData = res.data
    if (res.data.devices?.length > 0) {
        createScroll()
    } else {
        stopScroll()
    }
}

const tableContainer = ref(null);
const tableRef = ref(null);
let timer = null;
// 停止滚动
const stopScroll = () => {
    clearInterval(timer);
    timer = null;
};
// 创建滚动效果
const createScroll = () => {
    stopScroll(); // 先清除已有的定时器
    // 确保DOM已更新
    nextTick(() => {
        // 获取表格滚动容器
        const table = tableRef.value.layout.table.refs;
        const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
        // 设置滚动定时器
        timer = setInterval(() => {
            tableWrapper.scrollTop += 1; // 每次滚动1px
            // 检测是否滚动到了底部
            if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight - 1) {
                tableWrapper.scrollTop = 0; // 回到顶部，实现循环
            }
        }, 20); // 滚动间隔，控制滚动速度
    });
};
let closeTan = () => {
    stopScroll();
}

defineExpose({
    open,
    close
})

</script>

<style lang='less' scoped>
:deep(.el-dialog) {
    height: 682px;
    background: #021b40;
    box-shadow: 6px 6px 21.3px 0 rgba(0, 17, 51, 0.61);
    // opacity: 0.9;
    padding: 0;
}

.tantop {
    // margin-top: 15px;
    padding: 15px 54px;
    background: linear-gradient(90deg, rgba(10, 79, 168, 0.56) 0%, rgba(47, 93, 153, 0.00) 100%);

    .listitem {
        border-radius: 5px;
        padding: 5px 32px;
        color: #1871B4;
        font-size: 23px;
        margin-right: 10px;
        border: 1px solid #94D2FF;
        background: linear-gradient(180deg, rgba(0, 71, 157, 0.00) 0%, rgba(75, 207, 255, 0.13) 100%);
    }

    .active {
        color: #fff;
        border: 1px solid #94D2FF;
        background: linear-gradient(180deg, rgba(0, 71, 157, 0.00) 0%, rgba(75, 207, 255, 0.50) 100%);
        box-shadow: 1px 0 6.7px 0 rgba(0, 32, 83, 0.36);
    }

    .rightbox {
        width: 650px;

        :deep(.el-select__wrapper) {
            width: 200px;
            color: #fff;
            border-radius: 69px;
            border: 1px solid #4ED0FF;
            padding: 13px 35px;
            border-radius: 69px;
            background: linear-gradient(180deg, rgba(57, 172, 255, 0.14) 0%, rgba(48, 109, 153, 0.01) 100%);
            font-size: 20px;
        }

        :deep(.el-select__placeholder) {
            color: #FFF;
        }

        :deep(.el-select__suffix) {
            color: #4ECFFE;
        }

    }
}

.xboxs {
    margin-top: 33px;
    margin-bottom: 17px;
    padding-left: 33px;

    .itemboxs {
        width: 210px;
        height: 88px;
        background: rgba(10, 79, 168, 0.21);
        margin-right: 14px;

        .ic {
            width: 40px;
            height: 40px;
            margin-left: 18px;
            margin-right: 13px;
            animation: floating 1.5s infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0);
                /* 初始位置 */
            }

            50% {
                transform: translateY(-2px);
                /* 向上移动4像素 */
            }

            100% {
                transform: translateY(2px);
                /* 回到初始位置 */
            }
        }

        .rbox {
            background-color: #063572;
            padding: 4px 17px 4px 24px;

            .count {
                color: #FFF;
                font-size: 30px;
            }

            .tai {
                font-size: 12px;
                color: #fff;
                margin-left: 5px;
            }

            .xt {
                color: #189CFF;
                font-size: 14px;
            }

        }
    }
}

.offlist {
    margin-top: 15px;
    padding: 0px 33px;
    box-sizing: border-box;

    :deep(.el-table) {
        --el-table-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        --el-table-tr-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        --el-table-border-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        color: #CAD4E5;
        font-size: 16px;
    }

    :deep(.el-table thead) {
        color: #CAD4E5;
    }

    :deep(.el-table th.el-table__cell) {
        background: linear-gradient(180deg, rgba(25, 158, 255, 0.26) 0%, rgba(25, 158, 255, 0.72) 100%);
    }

    :deep(.el-table .el-table__body tr:hover>td) {
        background-color: transparent !important;
        /* 或者你想要的其他样式 */
    }

    :deep(.el-table__body) {
        border-collapse: separate !important;
        border-spacing: 0 5px !important;
        table-layout: auto !important;
    }

    :deep(.el-table tr) {
        background: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
    }

    :deep(.el-table .cell) {
        word-break: break-all;
    }

}
</style>